<template>
	<view :class="[attrIndex==1?'data':'data datatd']">
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop clearfix">
			<view class="left fl clearfix">
				<view class="mess fl" @click="qiehuan(1)">
					<view :class="[attrIndex==1?'active':'active1']">直营</view>
					<text class="dian" v-if="attrIndex == 1"></text>
				</view>
				<view class="mess fl" @click="qiehuan(2)" v-if="role_id == 1 || role_id == 11">
					<view :class="[attrIndex==2?'active':'active2']">团队</view>
					<text class="dian" v-if="attrIndex == 2"></text>
				</view>
			</view>
		</view>
		<view class="nr" v-if="attrIndex == 1">
			<view class="tongji">
				<image :src="baseUrl + '/wximage/datatj.png'"></image>
				<view class="price">{{totalmoney}}</view>
				<view class="name">总收益（元）</view>
			</view>
			<view class="content">
				<view class="list">
					<view class="top clearfix">
						<view class="title fl">营收走势</view>
						<view class="right fr clearfix">
							<picker class="picker" mode="date" header-text="选择时间" fields="month" @change="selectDataTime">
								<image :src="baseUrl + '/wximage/shaixuan.png'" class="zuo fl"></image>
								<view class="name fl">筛选</view>
							</picker>
							<view class="picker">
								<view class="name fl">丨</view>
								<view class="name fl" @click="zyysstatus = true">{{zyyslabel}}</view>
								<image :src="baseUrl + '/wximage/dataxl.png'" class="you fl" @click="zyysstatus = true"></image>
								<u-select v-model="zyysstatus" :list="zyyslist" @confirm="zyconfirmys"></u-select>
							</view>
						</view>
					</view>
					<view class="timetishi" v-if="zymonth">{{zymonth}}</view>
					<view class="bottom">
						<qiun-data-charts type="area" :opts="opts" :chartData="chartDatazy" />
					</view>
				</view>
				<view class="list">
					<view class="top clearfix">
						<view class="title fl">订单</view>
						<view class="right fr clearfix">
							<image :src="baseUrl + '/wximage/shaixuan.png'" class="zuo fl" @click="zyddshow = true"></image>
							<view class="name fl" @click="zyddshow = true">筛选</view>
							<view class="name fl">丨</view>
							<view class="name fl" @click="zyddstatus = true">{{zyddlabel}}</view>
							<image :src="baseUrl + '/wximage/dataxl.png'" class="you fl" @click="zyddstatus = true"></image>
							
							<u-select v-model="zyddstatus" :list="zyddlist" @confirm="zyconfirmdd"></u-select>
							<u-calendar v-model="zyddshow" :mode="zyddmode" toolTip="日期选择" @change="zyddchange"></u-calendar>
						</view>
					</view>
					<view class="timetishi" v-if="zyddsdate">{{zyddsdate}}至{{zyddedate}}</view>
					<view class="shuju clearfix">
						<view class="liebiao">
							<view class="shuzi">{{zyorder.ddcount}}</view>
							<view class="names">支付订单数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{zyorder.ddmoney}}</view>
							<view class="names">支付订单金额</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{zyorder.tkmoney}}</view>
							<view class="names">退款金额</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{zyorder.symoney}}</view>
							<view class="names">收益金额</view>
						</view>
						<view class="liebiao" v-if="role_id != 12 && role_id != 13">
							<view class="shuzi">{{zyorder.sbcount}}</view>
							<view class="names">售宝订单数</view>
						</view>
						<view class="liebiao" v-if="role_id != 12 && role_id != 13">
							<view class="shuzi">{{zyorder.sbmoney}}</view>
							<view class="names">售宝订单金额</view>
						</view>
						<view class="liebiao" v-if="role_id != 12 && role_id != 13">
							<view class="shuzi">{{zyorder.sbshouyi}}</view>
							<view class="names">售宝收益金额</view>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="top clearfix">
						<view class="title fl">设备</view>
						<view class="morets" v-if="role_id != 12" @click="topage('/subpackageA/equipment/index')">查看更多>></view>
					</view>
					<view class="shuju clearfix">
						<view class="liebiao">
							<view class="shuzi">{{zyshebei.count}}</view>
							<view class="names">设备总数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{zyshebei.zaixianlv}}</view>
							<view class="names">设备在线率%</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{zyshebei.zxcount}}</view>
							<view class="names">总在线数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{zyshebei.lxcount}}</view>
							<view class="names">总离线数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{zyshebei.azcount}}</view>
							<view class="names">安装数</view>
						</view>
					</view>
				</view>
				<view class="list listlast">
					<view class="top clearfix">
						<view class="title fl">门店</view>
						<view class="morets" v-if="role_id != 12" @click="topage('/subpackageA/store/index')">查看更多>></view>
					</view>
					<view class="shuju clearfix">
						<view class="liebiao">
							<view class="shuzi">{{zystore.zcount}}</view>
							<view class="names">门店总数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{zystore.zcount7}}</view>
							<view class="names">7日新增</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{zystore.zcount30}}</view>
							<view class="names">30日新增</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="nr" v-if="attrIndex == 2">
			<view class="content">
				<view class="list">
					<view class="top clearfix">
						<view class="title fl">营收走势</view>
						<view class="right fr clearfix">
							<picker class="picker" mode="date" header-text="选择时间" fields="month" @change="selectDataTimetd">
								<image :src="baseUrl + '/wximage/shaixuan.png'" class="zuo fl"></image>
								<view class="name fl">筛选</view>
							</picker>
							<view class="picker">
								<view class="name fl">丨</view>
								<view class="name fl" @click="tdysstatus = true">{{tdyslabel}}</view>
								<image :src="baseUrl + '/wximage/dataxl.png'" class="you fl" @click="tdysstatus = true"></image>
								
								<u-select v-model="tdysstatus" :list="tdyslist" @confirm="tdconfirmys"></u-select>
							</view>
						</view>
					</view>
					<view class="timetishi" v-if="tdmonth">{{tdmonth}}</view>
					<view class="bottom">
						<qiun-data-charts type="area" :opts="opts" :chartData="chartDatatd" />
					</view>
				</view>
				<view class="list">
					<view class="top clearfix">
						<view class="title fl">订单</view>
						<view class="right fr clearfix">
							<image :src="baseUrl + '/wximage/shaixuan.png'" class="zuo fl" @click="tdddshow = true"></image>
							<view class="name fl" @click="tdddshow = true">筛选</view>
							<view class="name fl">丨</view>
							<view class="name fl" @click="tdddstatus = true">{{tdddlabel}}</view>
							<image :src="baseUrl + '/wximage/dataxl.png'" class="you fl" @click="tdddstatus = true"></image>
							
							<u-select v-model="tdddstatus" :list="tdddlist" @confirm="tdconfirmdd"></u-select>
							<u-calendar v-model="tdddshow" :mode="tdddmode" toolTip="日期选择" @change="tdddchange"></u-calendar>
						</view>
					</view>
					<view class="timetishi" v-if="tdddsdate">{{tdddsdate}}至{{tdddedate}}</view>
					<view class="shuju clearfix">
						<view class="liebiao">
							<view class="shuzi">{{tdorder.ddcount}}</view>
							<view class="names">支付订单数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdorder.ddmoney}}</view>
							<view class="names">支付订单金额</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdorder.tkmoney}}</view>
							<view class="names">退款金额</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdorder.symoney}}</view>
							<view class="names">收益金额</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdorder.sbcount}}</view>
							<view class="names">售宝订单数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdorder.sbmoney}}</view>
							<view class="names">售宝订单金额</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdorder.sbshouyi}}</view>
							<view class="names">售宝收益金额</view>
						</view>
					</view>
				</view>
				<view class="list">
					<view class="top clearfix">
						<view class="title fl">设备</view>
						<view class="morets" v-if="role_id != 12" @click="topage('/subpackageA/equipment/index')">查看更多>></view>
					</view>
					<view class="shuju clearfix">
						<view class="liebiao">
							<view class="shuzi">{{tdshebei.count}}</view>
							<view class="names">设备总数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdshebei.zaixianlv}}</view>
							<view class="names">设备在线率%</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdshebei.zxcount}}</view>
							<view class="names">总在线数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdshebei.lxcount}}</view>
							<view class="names">总离线数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdshebei.azcount}}</view>
							<view class="names">安装数</view>
						</view>
					</view>
				</view>
				<view class="list listlast">
					<view class="top clearfix">
						<view class="title fl">门店</view>
						<view class="morets" v-if="role_id != 12" @click="topage('/subpackageA/store/index')">查看更多>></view>
					</view>
					<view class="shuju clearfix">
						<view class="liebiao">
							<view class="shuzi">{{tdstore.zcount}}</view>
							<view class="names">门店总数</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdstore.zcount7}}</view>
							<view class="names">7日新增</view>
						</view>
						<view class="liebiao">
							<view class="shuzi">{{tdstore.zcount30}}</view>
							<view class="names">30日新增</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				attrIndex: 1,
				//直营营收筛选
				zymonth: '',
				//直营营收
				zyysstatus: false,
				zyyslist: [{
					value: 1,
					label: '本周',
				}, {
					value: 2,
					label: '本月',
				}],
				zyysvalue: 1,
				zyyslabel: '本周',
				//直营订单
				zyddstatus: false,
				zyddlist: [{
					value: 1,
					label: '今天',
				}, {
					value: 2,
					label: '昨天',
				}, {
					value: 3,
					label: '本月',
				}],
				zyddvalue: 1,
				zyddlabel: '今天',
				//直营订单筛选
				zyddshow: false,
				zyddmode: 'range',
				zyddsdate: '',
				zyddedate: '',
				
				//团队营收
				tdysstatus: false,
				tdyslist: [{
					value: 1,
					label: '本周',
				}, {
					value: 2,
					label: '本月',
				}],
				tdysvalue: 1,
				tdyslabel: '本周',
				tdmonth: '',
				//团队订单
				tdddstatus: false,
				tdddlist: [{
					value: 1,
					label: '今天',
				}, {
					value: 2,
					label: '昨天',
				}, {
					value: 3,
					label: '本月',
				}],
				tdddvalue: 1,
				tdddlabel: '今天',
				//团队订单筛选
				tdddshow: false,
				tdddmode: 'range',
				tdddsdate: '',
				tdddedate: '',
				
				chartDatazy: {},
				chartDatatd: {},
				opts: {
					color: ["#5C88FA"],
					padding: [15, 15, 10, 10],
					enableScroll: false,
					dataLabel: false,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						gridType: "dash",
						fontSize: 12,
						axisLineColor: '#D8D8D8',
						labelCount: 7, // x轴显示数据个数
					},
					yAxis: {
						disableGrid: false,
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.4,
							addLine: true,
							width: 1,
							gradient: true,
						}
					}
				},
				agent_id: '',
				role_id: '',
				totalmoney: '',
				zyorder: {
					ddcount: 0,
					ddmoney: 0,
					tkmoney: 0,
					symoney: 0,
					sbcount: 0,
					sbmoney: 0,
					sbshouyi: 0,
				},
				zyshebei: {
					count: 0,
					zxcount: 0,
					lxcount: 0,
					azcount: 0,
					zaixianlv: 0,
				},
				zystore: {
					zcount: 0,
					zcount7: 0,
					zcount30: 0,
				},
				tdorder: {
					ddcount: 0,
					ddmoney: 0,
					tkmoney: 0,
					symoney: 0,
					sbcount: 0,
					sbmoney: 0,
					sbshouyi: 0,
				},
				tdshebei: {
					count: 0,
					zxcount: 0,
					lxcount: 0,
					azcount: 0,
					zaixianlv: 0
				},
				tdstore: {
					zcount: 0,
					zcount7: 0,
					zcount30: 0,
				}
			}
		},
		onLoad() {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			
			this.agent_id = uni.getStorageSync('agent_id');
			this.role_id = uni.getStorageSync('role_id');
			
			this.getTotalmoney();//总收益
			this.getZyyingshou(this.zyysvalue, this.zymonth);//直营营收
			this.getZyorder(this.zyddvalue, this.zyddsdate, this.zyddedate);//直营订单
			this.getZyshebei();//直营设备
			this.getZystore();//直营门店
			
		},
		methods: {
			getTotalmoney(){
				this.request({
					url: '/xcx/moretotalmoney',
					data: {
						agent_id: this.agent_id,
						role_id: this.role_id,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.totalmoney = res.data.data.summoney;
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			getZyyingshou(zyysvalue,zymonth){
				let that = this;
				this.request({
					url: '/xcx/morezyyingshou',
					data: {
						agent_id: this.agent_id,
						role_id: this.role_id,
						zyysvalue: zyysvalue,
						zymonth: zymonth,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						let xingqi = [];
						let arr = [];
						for(let i=0;i<res.data.data.length;i++){
							xingqi.push(res.data.data[i].week);
							arr.push(res.data.data[i].ordersymoney)
						}
						that.getServerDatazy(xingqi,arr);
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			getZyorder(zyddvalue,zyddsdate,zyddedate){
				this.request({
					url: '/xcx/morezyorder',
					data: {
						agent_id: this.agent_id,
						role_id: this.role_id,
						zyddvalue: zyddvalue,
						zyddsdate: zyddsdate,
						zyddedate: zyddedate,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.zyorder = res.data.data;
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			getZyshebei(){
				this.request({
					url: '/xcx/morezyshebei',
					data: {
						agent_id: this.agent_id,
						role_id: this.role_id,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.zyshebei = res.data.data;
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			getZystore(){
				this.request({
					url: '/xcx/morezystore',
					data: {
						agent_id: this.agent_id,
						role_id: this.role_id,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.zystore = res.data.data;
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			getTdyingshou(tdysvalue,tdmonth){
				let that = this;
				this.request({
					url: '/xcx/moretdyingshou',
					data: {
						agent_id: this.agent_id,
						role_id: this.role_id,
						zyysvalue: tdysvalue,
						zymonth: tdmonth,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						let xingqi = [];
						let arr = [];
						for(let i=0;i<res.data.data.length;i++){
							xingqi.push(res.data.data[i].week);
							arr.push(res.data.data[i].ordersymoney)
						}
						that.getServerDatatd(xingqi,arr);
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			getTdorder(tdddvalue,tdddsdate,tdddedate){
				this.request({
					url: '/xcx/moretdorder',
					data: {
						agent_id: this.agent_id,
						role_id: this.role_id,
						zyddvalue: tdddvalue,
						zyddsdate: tdddsdate,
						zyddedate: tdddedate,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.tdorder = res.data.data;
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			getTdshebei(){
				this.request({
					url: '/xcx/moretdshebei',
					data: {
						agent_id: this.agent_id,
						role_id: this.role_id,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.tdshebei = res.data.data;
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			getTdstore(){
				this.request({
					url: '/xcx/moretdstore',
					data: {
						agent_id: this.agent_id,
						role_id: this.role_id,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						this.tdstore = res.data.data;
					} else {
						uni.showToast({
							title: '请求失败，请稍后再试',
							icon: 'none'
						})
					}
				})
			},
			zyconfirmys(e) {
				this.zyysvalue = e[0].value;
				this.zyyslabel = e[0].label;
				
				this.zymonth = '';
				this.getZyyingshou(this.zyysvalue, this.zymonth);//直营营收
			},
			selectDataTime(e) {
				this.zymonth = e.detail.value;
				
				this.zyysvalue = 1;
				this.zyyslabel = '本周';
				
				this.getZyyingshou(this.zyysvalue, this.zymonth);//直营营收
			},
			selectDataTimetd(e) {
				this.tdmonth = e.detail.value;
				
				this.tdysvalue = 1;
				this.tdyslabel = '本周';
				
				this.getTdyingshou(this.tdysvalue, this.tdmonth);//团队营收
			},
			zyconfirmdd(e) {
				this.zyddvalue = e[0].value;
				this.zyddlabel = e[0].label;
				
				this.zyddsdate = '';
				this.zyddedate = '';
				
				this.getZyorder(this.zyddvalue, this.zyddsdate, this.zyddedate);//直营订单
			},
			zyddchange(e) {
				this.zyddvalue = 1;
				this.zyddlabel = '今天';
				
				this.zyddsdate = e.startDate;
				this.zyddedate = e.endDate;
				
				this.getZyorder(this.zyddvalue, this.zyddsdate, this.zyddedate);//直营订单
			},
			getServerDatazy(xingqi,arr) {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: xingqi,
					series: [{
							name: "",
							data: arr
						}
					]
				};
				this.chartDatazy = JSON.parse(JSON.stringify(res));
			},
			tdconfirmys(e) {
				this.tdysvalue = e[0].value;
				this.tdyslabel = e[0].label;
				
				this.tdmonth = '';
				
				this.getTdyingshou(this.tdysvalue, this.tdmonth);//团队营收
			},
			getServerDatatd(xingqi,arr) {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: xingqi,
					series: [{
							name: "",
							data: arr
						}
					]
				};
				this.chartDatatd = JSON.parse(JSON.stringify(res));
			},
			tdconfirmdd(e) {
				this.tdddvalue = e[0].value;
				this.tdddlabel = e[0].label;
	
				this.tdddsdate = '';
				this.tdddedate = '';
				
				this.getTdorder(this.tdddvalue, this.tdddsdate, this.tdddedate);//团队订单
			},
			tdddchange(e) {
				this.tdddvalue = 1;
				this.tdddlabel = '今天';
				
				this.tdddsdate = e.startDate;
				this.tdddedate = e.endDate;
				
				this.getTdorder(this.tdddvalue, this.tdddsdate, this.tdddedate);//团队订单
			},
			qiehuan(index){
				this.attrIndex = index;
				
				if(this.attrIndex == 1){//直营
					//总收益
					this.getTotalmoney();
					this.getZyyingshou(this.zyysvalue, this.zymonth);//直营营收
					this.getZyorder(this.zyddvalue, this.zyddsdate, this.zyddedate);//直营订单
					this.getZyshebei();//直营设备
					this.getZystore();//直营门店
				}else{
					this.getTdyingshou(this.tdysvalue, this.tdmonth);//团队营收
					this.getTdorder(this.zyddvalue, this.zyddsdate, this.zyddedate);//团队订单
					this.getTdshebei();//团队设备
					this.getTdstore();//团队门店
				}
			},
			topage(url){
				uni.navigateTo({
					url
				})
			},
			fanhui() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data {
		width: 100%;
		margin: 0 auto;
		height: 114vh;
		overflow-y: scroll;
		background-image: url('https://api.jixiaodian.cn/images/login_bj.png');
		background-size: 100% 100%;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;

				.iconfont {
					position: absolute;
					top: 0;
					left: 30rpx;
					font-size: 44rpx;
				}
			}
		}

		.headtop {
			position: absolute;
			width: 90%;
			top: 180rpx;
			left: 5%;

			.left {
				.mess {
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;

					view {
						font-size: 24rpx;
						color: #333333;
					}

					.dian {
						width: 8rpx;
						height: 8rpx;
						background: #5C88FA;
						display: block;
						border-radius: 50%;
						margin: 0 auto;
					}

					.active {
						font-size: 32rpx;
						color: #333333;
						font-weight: 700;
						margin-left: 0;
					}

					.active1 {
						margin-left: 0;
						margin-right: 20rpx;
					}

					.active2 {
						margin-left: 20rpx;
					}
				}
			}

			.right {
				width: 130rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-top: 4rpx;
			}
		}

		.nr {
			position: absolute;
			width: 90%;
			top: 260rpx;
			left: 5%;
			z-index: 70;

			.tongji {
				width: 100%;
				position: relative;

				image {
					width: 100%;
					height: 180rpx;
				}

				.price {
					width: 100%;
					text-align: center;
					color: #333333;
					font-size: 60rpx;
					font-weight: 700;
					position: absolute;
					top: 30rpx;
				}

				.name {
					width: 100%;
					text-align: center;
					color: #333333;
					font-size: 26rpx;
					position: absolute;
					top: 116rpx;
				}
			}

			.content {
				width: 100%;
				margin-top: 20rpx;
				padding: 20rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				border-radius: 20rpx;

				.list {
					margin-bottom: 40rpx;

					.top {
						margin-top: 10rpx;
						position: relative;

						.title {
							font-size: 32rpx;
							color: #333333;
							font-weight: 700;
							margin-left: 20rpx;
						}

						.right {
							height: 36rpx;
							line-height: 36rpx;
							background: #F6F8FF;
							border-radius: 24rpx;
							margin-top: 4rpx;
							
							.picker{
								display: inline-block;
							}

							.zuo {
								width: 36rpx;
								height: 36rpx;
								margin-left: 6rpx;
								margin-right: 6rpx;
							}

							.you {
								width: 20rpx;
								height: 20rpx;
								margin-top: 6rpx;
								margin-left: 6rpx;
								margin-right: 6rpx;
							}

							.name {
								font-size: 22rpx;
								color: #333333;
							}
						}

						.more {
							position: absolute;
							font-size: 24rpx;
							color: #5C88FA;
							left: 100rpx;
							top: 6rpx;
						}

						.morets {
							position: absolute;
							font-size: 24rpx;
							color: #5C88FA;
							right: 0;
							top: 6rpx;
						}
					}

					.bottom {
						width: 100%;
						margin-top: 20rpx;
						height: 376rpx;
						background: #F6F8FF;
						border-radius: 16rpx;
					}
					
					.timetishi{
						text-align: right;
						font-size: 24rpx;
						color: #5C88FA;
						margin-top: 10rpx;
					}

					.shuju {
						width: 100%;
						margin-top: 20rpx;
						background: #F6F8FF;
						border-radius: 16rpx;

						.liebiao {
							width: 25%;
							text-align: center;
							float: left;

							.shuzi {
								font-size: 36rpx;
								color: #333333;
								font-weight: 700;
								margin-top: 20rpx;
								margin-bottom: 10rpx;
							}

							.names {
								font-size: 24rpx;
								color: #333333;
								margin-bottom: 20rpx;
							}
						}
					}
				}

				.listlast {
					margin-bottom: 0;
				}
			}
		}
	}

	.datatd {
		height: 100vh;
	}
</style>